<template>
	<view class="me">
		<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Rectangle 3@2x.png" class="meback"
			mode="widthFix"></image>
		<view class="headertop" :style="{'background':back1}">
			<view class="topdaohang" :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}">
				<span>企址易</span>
			</view>
		</view>
		<view :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}"></view>
		<view class="userinfo" @click="gopage('个人中心')">
			<view class="userleft">
				<view class="nameline">
					<view class="namesl">
						{{userobj['nickname']||'未登录'}}
					</view> <span style="font-size:32rpx ;font-weight: 500;"
						v-if="userobj.mobile">{{userobj.mobile.slice(0,3)}}****{{userobj.mobile.slice(7,11)}}</span>
				</view>
				<view class="zsry" @click.stop="gopage('招商人员认证')">
					<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Rectangle 24702@2x.png"
						class="zsryback" mode=""></image>
					<span v-if="userobj['nickname']">{{userobj.level==0?'普通用户':'招商人员已认证'}}</span>
					<span v-else>普通用户</span>
					<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Frame@2x(3).png" class="arrowright"
						mode=""></image>
				</view>
			</view>
			<image :style="{'border':userobj['avatar']?'2rpx solid #FFFFFF;':'none'}"
				:src="userobj['avatar']?userobj['avatar']:'https://jingwei.xunfuzhifuzaixian.com/static/images/默认头像.png'"
				class="useravatar" mode=""></image>
		</view>
		<view class="myzhu">
			<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Rectangle 24696@2x.png" class="myzhuback"
				mode="widthFix"></image>
			<view class="titleline">
				<view class="tt">
					我的账户
				</view>
				<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11763@2x.png" class="icon"
					mode=""></image>
			</view>
			<view class="gliboxs">
				<view class="itemgl" @click="gopage('佣金池')">
					<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11876@2x.png" mode=""></image>
					<span>佣金池</span>
				</view>
				<view class="itemgl" @click="gopage('提现')">
					<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11877@2x.png" mode=""></image>
					<span>可提现</span>
				</view>
				<view class="itemgl" @click="gopage('账户管理')">
					<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11878@2x.png" mode=""></image>
					<span>账户管理</span>
				</view>
			</view>
			<view class="jiange">

			</view>
			<view class="gzxq">
				<view class="mygz" @click="gopage('我的关注')">
					<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11879@2x.png" class="mygzback"
						mode=""></image>
					<view class="texts">
						<view class="t1">
							我的关注
						</view>
						<view class="t2">
							我的关注记录
						</view>
					</view>
				</view>
				<view class="mygz">
					<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11880@2x.png" class="mygzback"
						mode=""></image>
					<view class="texts" @click="gopage('我的需求')">
						<view class="t1" style="color: #19ADB4;">
							我的需求
						</view>
						<view class="t2" style="color: #19ADB4;">
							我录入的需求
						</view>
					</view>
				</view>
			</view>
			<button open-type="contact" class="itemkf">
				<view class="leftt">
					<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Frame@2x(4).png" class="icon"
						mode=""></image>
					<span>在线客服</span>
				</view>
				<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250804140808.png"
					class="arrowright" mode=""></image>
			</button>
			<view class="itemkf" @click="gopage('平台规则说明')">
				<view class="leftt">
					<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Frame@2x(7).png" class="icon"
						mode=""></image>
					<span>平台规则说明</span>
				</view>
				<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250804140808.png"
					class="arrowright" mode=""></image>
			</view>
			<view class="itemkf" @click="gopage('意见反馈')">
				<view class="leftt">
					<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Frame@2x(6).png" class="icon"
						mode=""></image>
					<span>意见反馈</span>
				</view>
				<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250804140808.png"
					class="arrowright" mode=""></image>
			</view>
			<view class="itemkf" @click="gopage('设置')">
				<view class="leftt">
					<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Frame@2x(5).png" class="icon"
						mode=""></image>
					<span>设置</span>
				</view>
				<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250804140808.png"
					class="arrowright" mode=""></image>
			</view>
		</view>
		<view style="height: 200rpx;">

		</view>
		<userlogin @updata="getuser" ref="denglu"></userlogin>
		<Tabbar page="/pages/me/index"></Tabbar>
	</view>
</template>
<script setup>
	import userlogin from '@/components/getuser/getuser.vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app";
	import Tabbar from '@/components/tabbar.vue'
	import {
		$api
	} from '../../ulm';
	import {
		ref,
		onMounted,
		reactive,
	} from 'vue'
	import {
		setToken,
		getToken,
	} from '@/ulm/utils/auth';
	const statusBarHeight = ref('')
	const userobj = ref({})
	const active = ref(0)
	const back1 = ref('')
	const denglu = ref(null)
	const barHeight = ref('')
	onShow(() => {
		if (getToken()) {
			getuser()
		} else {
			userobj.value = {
				avatar: '',
			}
		}
	})
	async function getuser() {
		const res = await $api.userxinxi()
		if (res.code == 1) {
			userobj.value = res.data
		}
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#CAEEFF'
		} else {
			back1.value = ''
		}
	})

	function gopage(str) {
		if (!getToken()) {
			denglu.value.DengLu()
			return
		}
		if (str == '个人中心') {
			uni.navigateTo({
				url: '/sub_me/index/set'
			})
		} else if (str == '提现') {
			uni.navigateTo({
				url: '/sub_me/index/ketixian'
			})
		} else if (str == '我的关注') {
			uni.navigateTo({
				url: '/sub_me/index/mygz'
			})
		} else if (str == '我的需求') {
			uni.navigateTo({
				url: '/sub_me/index/myxuqiu'
			})
		} else if (str == '佣金池') {
			uni.navigateTo({
				url: '/sub_me/index/yyc'
			})
		} else if (str == '账户管理') {
			uni.navigateTo({
				url: '/sub_me/index/zhgl'
			})
		} else if (str == '设置') {
			uni.navigateTo({
				url: '/sub_me/index/set'
			})
		} else if (str == '意见反馈') {
			uni.navigateTo({
				url: '/sub_me/index/fankuiList'
			})
		} else if (str == '平台规则说明') {
			uni.navigateTo({
				url: '/sub_me/index/ptrules'
			})
		} else if (str == '招商人员认证') {
			uni.navigateTo({
				url: '/sub_me/index/zsryrz1'
			})
		}

	}
</script>

<style lang="scss">
	button {
		border: none !important;
		align-items: center;
		overflow: auto !important;
		background: none !important;
		background-color: none !important;
		background-size: 100% 138% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0rpx !important;
		-webkit-tap-highlight-color: none !important;
		overflow: hidden !important;

		&:after {
			background: none !important;
			border: none;
			background-color: none !important;
			display: none !important;
		}
	}

	.me {
		width: 100%;
		overflow: hidden;
		position: relative;

		.myzhu {
			width: 100%;
			overflow: hidden;
			position: relative;

			.myzhuback {
				width: 100%;
				position: absolute;
				z-index: -1;
			}

			.itemkf {
				width: 686rpx;
				height: 98rpx;
				background: #F7F8FA !important;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: auto !important;
				margin-top: 28rpx !important;

				.arrowright {
					width: 32rpx;
					height: 32rpx;
					margin-right: 22rpx;
				}

				.leftt {
					display: flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #4E5969;

					.icon {
						width: 36rpx;
						height: 36rpx;
						margin-left: 24rpx;
						margin-right: 12rpx;
					}


				}
			}

			.gzxq {
				width: 686rpx;
				margin: auto;
				margin-top: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.mygz {
					width: 328rpx;
					height: 134rpx;
					position: relative;
					display: flex;
					align-items: center;

					.mygzback {
						width: 328rpx;
						height: 134rpx;
						position: absolute;
						z-index: -1;
					}

					.texts {
						margin-left: 132rpx;

						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #005EB5;
						}

						.t2 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #005EB5;
							margin-top: 8rpx;
						}
					}
				}
			}

			.jiange {
				width: 100%;
				height: 24rpx;
				background: #F7F8FA;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin-top: 32rpx;
			}

			.gliboxs {
				width: 686rpx;
				margin: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 46rpx;

				.itemgl {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 210rpx;
					overflow: hidden;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1D2129;

					image {
						width: 210rpx;
						height: 132rpx;
						margin-bottom: 16rpx;
					}
				}
			}

			.titleline {
				display: flex;
				align-items: center;
				margin-top: 32rpx;

				.tt {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #1D2129;
					margin-left: 32rpx;
				}

				.icon {
					width: 90rpx;
					height: 30rpx;
					margin-left: 164rpx;
				}
			}
		}

		.userinfo {
			width: 100%;
			display: flex;
			margin-top: 36rpx;
			justify-content: space-between;

			.useravatar {
				width: 152rpx;
				height: 152rpx;
				border-radius: 50%;
				border: 2rpx solid #FFFFFF;
				margin-right: 54rpx;
			}

			.userleft {
				margin-left: 30rpx;

				.nameline {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					display: flex;
					align-items: center;
					font-size: 40rpx;
					color: #FFFFFF;

					.namesl {
						max-width: 300rpx;
						/* 设置宽度 */
						white-space: nowrap;
						/* 给文本设置不换行在一行中显示 */
						overflow: hidden;
						/* 文本超出的部分隐藏 */
						text-overflow: ellipsis;
						/* 文本超出的部分用省略号代替 */
					}
				}

				.zsry {
					width: 240rpx;
					height: 48rpx;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #13A2E6;
					margin-top: 32rpx;

					.arrowright {
						width: 24rpx;
						height: 24rpx;
					}

					.zsryback {
						width: 240rpx;
						height: 48rpx;
						position: absolute;
						z-index: -1;
					}

				}
			}
		}

		.meback {
			width: 100%;
			position: absolute;
			z-index: -1;
		}

		.headertop {
			width: 100%;
			position: fixed;
			top: 0%;
			overflow: hidden;
			transition: 0.5s;
			z-index: 9999;

			.topdaohang {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 34rpx;
				color: #FFFFFF;
			}
		}
	}
</style>